
<template>
    <div class="testpage">  
      <div class="head">
          <h1 style="letter-spacing: 4px;">城市地理学智慧学习平台</h1>
      </div>
      <div class="main">
          <div class="thumbnail">
            <p>课件缩略图</p>
              <div class="thumbnail-list">
                  <div 
                    v-for="(image, index) in pictures" 
                    :key="index" 
                    class="thumbnail-item"
                    @click="getchapter(image)"
                    >
                      <img :src="image.picSrc" :alt="image.picId" class="thumbnail-image" />
                      <p class="thumbnail-caption">{{ image.picNum+1 }}</p>
                  </div>
              </div>
          </div>
          <div class="detailview">
              <img
                v-if="selectedImage"
                :src="selectedImage.picSrc"
                :alt="selectedImage.picId"
                ref="imageElement"
                class="preview-image"
              />
              <p v-else class="preview-placeholder">请点击左侧缩略图查看大图</p>
          </div>
          <div class="analysis">
            <p>知识点分析</p>
            <div class="kg-graph">
              <div class="kg-chart">
              <KGChart v-if="relatedentity.length != 0" :keyword="keyword" :dataArray="relatedentity"/>
              </div>
              <el-icon class="large-chart" @click="showFullscreenChart" :size="25"><FullScreen /></el-icon>
            </div>
            <div v-if="isFullscreen" class="fullscreen-overlay" @click="hideFullscreenChart">
                <div class="fullscreen-chart" @click.stop>
                    <el-icon  class="close-icon"  @click="hideFullscreenChart" :size="20"><Close /></el-icon>
                    <KGChart :keyword="keyword" :dataArray="relatedentity" />
                </div>
            </div>
            <!--图片识别出现概念-->
            <!-- <div class="entitybutton">
              <div v-if="selectedImage && entitylist.length === 0" class="entity-item">
                <el-button loading round>Loading</el-button>
              </div>
              <div v-if="selectedImage" class="entity-item">
                <el-button 
                  v-for="(entity, index) in entitylist" 
                  :key="index"
                  @click="getGraphEntity(entity)" 
                  round>
                  {{ entity }}
                </el-button>
              </div>
            </div> -->
            <div class="entitybutton">
              <div class="entity-item">
                <el-button 
                  v-for="(entity, index) in entitylist" 
                  :key="index"
                  @click="getGraphEntity(entity)" 
                  round>
                  {{ entity }}
                </el-button>
                <el-tooltip content="知识点管理" placement="bottom" effect="light">
                  <el-button @click="showFullscreen" round>…</el-button>
                </el-tooltip>
                <div v-if="isFull" class="fullscreen-overlay" @click="hideFullscreen">
                  <div class="fullscreen-entitylist" @click.stop>
                    <el-icon  class="close-icon"  @click="hideFullscreen" :size="20"><Close /></el-icon>
                    <EntityManage :chapter="chapter" :entitylist="entitylist" @changeentity="fetchEntityList"></EntityManage>
                  </div>
                </div>
              </div>
            </div>
            <AIChat class="ai-chat" :chatDAta="chatData"/>
          </div>
      </div>
    </div>
  </template>
  <script>
  import { getPptList } from '@/api/pptpic';
  import { extractEntityFromImage ,extractGraphFromImage } from '@/api/ocrpic'; // 引入封装的方法
  import { getEntitiesByChapter } from '@/api/entityapi';
  import KGChart from '@/components/KG-Chart.vue';
  import AIChat from '@/components/AI-Chat.vue';
  import EntityManage from '@/components/EntityManage.vue'

  export default {
      name: 'HomePage',
      components: {
        KGChart,  
        AIChat,
        EntityManage,
      },
      data() {
      return {
        selectedImage: null,
        username:'',
        pictures:[],
        imageUrl: '/img/2.png', // 图片路径，放在 public/img 中
        text: '',
        entitylist: [],
        relatedentity: [],
        keyword: '',
        isFullscreen:false,
        isFull:false,
        chapter:'',
      };
      },
      async created() {
        getPptList().then((result) => {
          this.pictures = result
          this.getchapter(this.pictures[0]);
        });
        this.fetchEntityList();
        this.getGraphEntity("城市地理学");
      },
      mounted() {
          // Lifecycle hook
        
      },
      methods: {
        // 选中图片后，提取图片中的概念实体
        async getRelatedEntity(keyword){
            try {
                const result =  await extractGraphFromImage(keyword);
                this.relatedentity = result;
                console.log("相关：",this.relatedentity);
            } catch (error) {
                console.error('Error extracting entities from image:', error);
            }
          },
        // 选中图片后，提取图片中的实体  
        async selectImage(image) {
            this.relatedentity = [];
            this.entitylist=[];
            this.selectedImage = image; // 更新选中的图片
            await this.$nextTick(); // 等待DOM更新
            const imageElement = this.$refs.imageElement;
            try {
                const result = await extractEntityFromImage(imageElement);
                this.entitylist = result;
            } catch (error) {
                console.error('Error extracting entities from image:', error);
            }
          },
          async getchapter(image){
            this.selectedImage = image;
            this.chapter = image.picChapter
            try {
                const result = await getEntitiesByChapter(image.picChapter);
                console.log("result:",result);
                this.entitylist = result;
            } catch (error) {
                console.error('Error extracting entities from image:', error);
            }
          },
          async fetchEntityList() {
            try {
                const result = await getEntitiesByChapter(this.chapter);
                console.log("changeresult:",result);
                this.entitylist = result;
            } catch (error) {
                console.error('Error extracting entities from image:', error);
            }
          },
          // 点击实体按钮，获取实体关联图谱
          getGraphEntity(entity){
            console.log("entity:",entity);
            this.keyword = '';
            this.relatedentity=[];
            this.getRelatedEntity(entity);
            this.keyword = entity;
          },
          showFullscreenChart() {
              this.isFullscreen = true; // 显示弹窗
          },
          hideFullscreenChart() {
              this.isFullscreen = false; // 隐藏弹窗
          },
          showFullscreen() {
            this.isFull = true; // 显示弹窗
          },
          hideFullscreen() {
            this.isFull = false; // 隐藏弹窗
          }
          
          
      }
  };
  </script>
  <style scoped>
  .testpage {
      height: 110vh;
      display: flex;
      flex-direction: column;
      align-items: center;
  }
  .head {
      display: flex;
      width: 100%;
      height: 5%;
      /* background-color: rgb(255, 241, 241); */
      align-items: center;
      margin: 0;
      padding: 0;

  }
  .head h1 {
      margin: 0 auto;
      font-size: 30px;
  }
  .main {
      display: flex;
      width: 100%;
      height: 90%;
      margin-top: 5px;
      background-color: rgb(216, 233, 253);
  }
  .thumbnail {
      width: 15%;
      height: 99%;
      background-color: rgb(149, 208, 251);
      margin-top: 5px;
      margin-left: 5px;
      border-radius: 4px;
      letter-spacing: 4px;
  }
  .thumbnail p{
    font-weight: bold;
    margin: 4;
    padding: 4;
  }
  .detailview {
      width: 55%;
      height: 100%;
      /* background-color: rgb(255, 207, 111); */
      margin-left: 5px;
  }
  .analysis {
      width: 30%;
      height: 99%;
      background-color: rgb(149, 208, 251);
      margin-right: 5px;
      margin-top: 5px;
      border-radius: 4px;
  }
  .analysis p{
    font-weight: bold;
    margin: 2;
    padding: 2;
    letter-spacing: 4px;
  }
  .thumbnail-list {
    height: 80vh; /* 设置容器高度，可按需调整 */
    overflow-y: auto; /* 如果缩略图过多，可以滚动 */
    padding: 5px;
  }
  .thumbnail-list::-webkit-scrollbar {
  display: none; /* 隐藏 Chrome、Safari 和 Opera 浏览器的滚动条 */
  }
  
  .thumbnail-item {
    margin-bottom: 20px;
    text-align: center;
    cursor: pointer; /* 鼠标悬停时显示手型 */
  }
  
  .thumbnail-item:hover {
    opacity: 0.8; /* 鼠标悬停时缩略图变暗 */
  }
  .thumbnail-image {
    width: 100%;
    max-width: 150px;
    height: auto;
    border-radius: 8px;
  }
  
  .thumbnail-caption {
    margin-top: 8px;
    font-size: 14px;
    color: #333;
  }
  
  .preview-image {
    margin-top: 8%;
    max-width: 95%;
    max-height: 80vh;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  }
  
  .preview-caption {
    margin-top: 16px;
    font-size: 18px;
    color: #333;
  }
  
  .preview-placeholder {
    font-size: 18px;
    color: #999;
    margin-top: 60px;
  }

  .kg-graph {
    display: flex;
    flex-direction: column; /* 垂直排列 */
    justify-content: space-between; /* 内容分布在两端 */
    align-items: flex-end; /* 按钮对齐到右下角 */
    margin-left: 10px;
    margin-top: 5px;
    width: 97%;
    height: 35%;
    background-color: #f5faff;
    box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.2);
  }
  .kg-chart{
    height: 85%;
    width: 100%; /* 图表占满宽度 */
  }
  .large-chart{
    align-self: flex-end;
    cursor: pointer; /* 鼠标悬浮时显示为手型 */
  }
.large-chart:hover{
    color:rgb(67, 176, 255) ;
  }
  .entitybutton{
    height: 5%;
  }
  .entity-item{
    margin-top: 10px;
    display: flex;
    justify-content: center; /* 水平居中 */
  }

  .fullscreen-overlay {
    position: fixed; /* 固定在页面最上层 */
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.204); /* 半透明背景 */
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1000; /* 确保在最上层 */
}

.fullscreen-chart {
    width: 50%;
    height: 50%;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.fullscreen-entitylist {
    width: 30%;
    height: 50%;
    background-color: white;
    border-radius: 8px;
    padding: 20px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
}
.close-icon {
    cursor: pointer; /* 鼠标悬浮时显示为手型 */
    transition: color 0.3s ease; /* 添加颜色过渡效果 */
}

.close-icon:hover {
    color: rgb(255, 0, 0); /* 鼠标悬浮时变为红色 */
}
  </style>